<form style="margin: 0px;padding: 0px;" method="post">
    <div id="p" class="easyui-panel" title="页面设置" style="width:100%;" data-options="collapsible:true ">
        <table width="100%" class="sztable" align="center">
            <tr>
                <input type="hidden" name="columnId"/>
                <input type="hidden" name="methodId" value="${methodId}"/>
            </tr>
            <tr>
                <td class="sztabletext" width="20%">字段名:</td>
                <td width="30%">
                    <input name="ename" type="text" style="width:200px;" id="name"
                           class="easyui-textbox" maxLength="20"
                           data-options="required:true,onChange:doGener"/>
                </td>
                <td class="sztabletext" width="20%">字段标题:</td>
                <td width="30%">
                    <input name="cname" type="text" style="width:200px;"
                           class="easyui-textbox" maxLength="20"
                           data-options="required:true,onChange:doGener"/>
                </td>
            </tr>
            <tr>
                <td class="sztabletext" width="20%">显示宽度:</td>
                <td width="30%">
                    <input name="width" type="text" style="width:200px;" id="width"
                           class="easyui-numberbox" value="200"
                           data-options="required:true,onChange:doGener"/>
                </td>
                <td class="sztabletext" width="20%">显示高度(-1 默认):</td>
                <td width="30%">
                    <input name="height" type="text" style="width:200px;" id="height"
                           class="easyui-numberbox" value="-1"
                           data-options="required:true,onChange:doGener"/>
                </td>
            </tr>
            <tr>
                <td class="sztabletext" width="20%">合并列数:</td>
                <td width="30%">
                    <input name="cols" style="width:200px;"
                           class="easyui-numberbox" maxLength="20" value="1"
                           data-options="required:true"/>
                </td>
                <td class="sztabletext" width="20%">表单类型:</td>
                <td width="30%">
                    <#dictTag id="formType" name="formType" showType="select" dictCode="formType" width="200" value="center" showNull="easyui-textbox" dataOptions="onChange:doGener"></#dictTag>
                </td>
            </tr>

            <tr>
                <td class="sztabletext" width="20%">对齐方式:</td>
                <td width="30%">
                    <#dictTag name="align" showType="select" dictCode="alignType" width="200" value="center" showNull="false"></#dictTag>
                </td>
                <td class="sztabletext" width="20%">默认值（可填写）:</td>
                <td width="30%">
                    <#dictTag name="defaultValue" showType="select" dictCode="defaultValue" width="200"  dataOptions="onChange:doGener" ></#dictTag>
                </td>
            </tr>
            <tr>
                <td class="sztabletext" width="20%">是否排序:</td>
                <td width="30%">
                    <#dictTag name="orderAble" showType="radio" dictCode="yesornot" width="200" value="1" ></#dictTag>
                </td>
                <td class="sztabletext" width="20%">是否冻结:</td>
                <td width="30%">
                    <#dictTag name="frozenAble" showType="radio" dictCode="yesornot" width="200" value="0" ></#dictTag>
                </td>
            </tr>
            <tr>
                <td class="sztabletext" width="20%">是否显示:</td>
                <td width="30%">
                    <#dictTag name="showAble" showType="radio" dictCode="yesornot" width="200" value="1" ></#dictTag>
                </td>
                <td class="sztabletext" width="20%">字典转换:</td>
                <td width="30%">
                    <#dictTag name="dictAble" showType="radio" dictCode="yesornot" width="200" value="0" ></#dictTag>
                </td>
            </tr>
            <tr>
                <td class="sztabletext" width="20%">是否可用:</td>
                <td width="30%">
                    <#dictTag name="useAble" showType="radio" dictCode="yesornot" width="200" value="1" ></#dictTag>
                </td>
                <td class="sztabletext" width="20%">是否编辑:</td>
                <td width="30%">
                    <#dictTag name="editAble" showType="radio" dictCode="yesornot" width="200" value="1" ></#dictTag>
                </td>
            </tr>
            <tr>
                <td class="sztabletext" width="20%">是否复选框:</td>
                <td width="30%">
                    <#dictTag name="checkboxAble" showType="radio" dictCode="yesornot" width="200" value="0" ></#dictTag>
                </td>
                <td class="sztabletext" width="20%">排序:</td>
                <td width="30%">
                    <input name="seq" type="text" style="width:200px;"
                           class="easyui-numberbox" maxLength="20" value="99"
                           data-options="required:true"/>
                </td>
            </tr>
        </table>
    </div>
    <div id="p2" class="easyui-panel" title="扩展设置" style="width:100%;" data-options="collapsible:true ">
        <table width="100%" class="sztable" align="center">
            <tr>
                <td class="sztabletext" width="20%">字段样式:</td>
                <td colspan="3">
                    <input name="css" type="text"  style="width:650px;" id="css" data-options="onChange:doGener"
                           class="easyui-textbox"  maxLength="20"  prompt="填写样式内容，不需要加style"/>
                </td>
            </tr>
            <tr>
                <td class="sztabletext" width="20%">UI校验器:</td>
                <td colspan="3">
                    <input name="uiCheck" type="text"  style="width:650px;" id="uiCheck"  data-options="onChange:doGener"
                           class="easyui-textbox"  maxLength="20"  prompt="填写校验内容，不需要加data-options，eg：validType:'minLength[5]'" />
                </td>
            </tr>
            <tr>
                <td class="sztabletext" width="20%">验证提示:</td>
                <td colspan="3">
                    <input name="invalidMessage" type="text"  style="width:650px;" id="invalidMessage"  data-options="onChange:doGener"
                           class="easyui-textbox"  maxLength="20"  prompt="填写样式验证提示"/>
                </td>
            </tr>
            <tr>
                <td class="sztabletext" width="20%">字典编码:</td>
                <td colspan="3">
                    <input id="dictStr" name="dictStr" type="text"  style="width:650px;"  prompt="sex"
                           class="easyui-textbox"   validType="length[0,400]" />
                </td>
            </tr>
            <tr>
                <td class="sztabletext" width="20%">格式化:</td>
                <td colspan="3">
                    <input id="formatter" name="formatter" type="text"  style="width:650px;height:50px" multiline="true" prompt="formatter:_DICT.YESORNOT"
                           class="easyui-textbox"   validType="length[0,400]" />
                </td>
            </tr>
            <tr STYLE="display: none">
                <td class="sztabletext" width="20%">字段事件:</td>
                <td colspan="3">
                    <input id="enent" name="enent" type="text"  style="width:650px;height:50px" multiline="true" prompt="请填写字段事件"
                           class="easyui-textbox"   validType="length[0,400]" />
                </td>
            </tr>
        </table>
    </div>
    <div id="p3" class="easyui-panel" title="表单预览" style="width:100%;" data-options="collapsible:true ">
        <table width="100%" class="sztable" align="center">
            <tr>
                <td class="sztabletext" width="20%">生成表单:</td>
                <td colspan="3">
                    <input id="formStr" name="formStr" type="text"  style="width:650px;height:80px" multiline="true"
                           class="easyui-textbox"   validType="length[0,400]" value='<input class="easyui-textbox" style="width: 200px;height: 26px"  />'
                    />
                    <input type="button" value="&nbsp;生&nbsp;成&nbsp;" onclick="doGener()">
                </td>
            </tr>
            <tr STYLE="display: none">
                <td class="sztabletext" width="20%">预览:</td>
                <td colspan="3">
                    <iframe id="priviewFrame" style="width:650px;height:30px;border:0px;"></iframe>
                </td>
            </tr>
        </table>
    </div>

</form>
<form id="privewForm" method="post" target="priviewFrame">
    <input type="hidden" name="hidFormStr" id="hidFormStr">
</form>
<script type="text/javascript">

    /**
     * 生成
     */
    function doGener(newValue, oldValue) {
        //名称、宽度、高度、样式、表单类型、默认值、字典编码、UI校验
        var _name = $("#name").numberbox("getValue");
        var _width = $("#width").numberbox("getValue");
        var _height = $("#height").numberbox("getValue");
        _height = _height == -1 ? '' : ("height:" + _height + "px" ) ;
        var _css = $("#css").textbox("getValue");
        var _formType = $("#formType").combobox("getValue");
        var _defaultValue = $("#defaultValue").combobox("getValue");
        var _dictCode = $("#dictStr").textbox("getValue");
        var _uiCheck = $("#uiCheck").textbox("getValue");
        var _invalidMessage = $("#invalidMessage").textbox("getValue");

        //处理文本域
        var _multiline = _formType == 'textArea' ? 'multiline="true"' : '';
        _formType = _formType == 'textArea' ? 'easyui-textbox' : _formType ;

        //UI校验器
        var _dataOptions= "";
        if(_uiCheck){
            _dataOptions = 'data-options="' + _uiCheck +' "'
        }

        var _str = '';
        if(_formType.indexOf("easyui") == 0 ) {
            _str = '<input id="#name#" name="#name#" class="#formType#" style="width: #width#px;#height# #css#" #multiline#  value="#defaultValue#" #dataOptions#/>' ;
            _str = _str.replace("#name#" , _name).replace("#name#" , _name).replace("#formType#" , _formType).replace("#width#" , _width).replace("#css#",_css);
            _str = _str.replace("#height#" , _height).replace("#multiline#",_multiline).replace("#dataOptions#",_dataOptions).replace("#defaultValue#" , _defaultValue);
            _str = _str.replace('value=""',"");
        }else if(_formType.indexOf("hidden") == 0){
            _str = '<input id="'+_name+'" name="'+_name+'" type="hidden">';
        }else if(_formType.indexOf("file") == 0){
            _str = '<input id="'+_name+'" name="'+_name+'" type="file" class="xlauch-file">';
        }else if(_formType.indexOf("image") == 0){
            _str = '<input id="'+_name+'"  name="'+_name+'" type="hidden" class="xlauch-file">';
        }else {
            _str = '<\#dictTag name="#name#" showType="#formType#" dictCode="#dictCode#" width="#width#" value="#defaultValue#" #dataOptions# showNull="false" ></\#dictTag>'
            _str = _str.replace("#name#" , _name).replace("#formType#" , _formType).replace("#dictCode#" , _dictCode).replace("#width#" , _width);
            _str = _str.replace("#defaultValue#" , _defaultValue).replace("#dataOptions#",_dataOptions.replace('data-options','dataOptions'));
            $("input[name='dictAble']").get(0).checked=true;
        }

        $("#formStr").textbox("setValue" , _str);
    }
    

    /**
     * 预览
     */
    function doPriview() {

    }


</script>
